<script setup lang="tsx">
import { ElMessageBox } from 'element-plus'
import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => {}
  },
  operatorOptions: {
    type: Object,
    default: () => {}
  }
})
type Member = {
  name: string
  avatar: string
  color: string
}
// 切换展开/收起状态的方法
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 团队负责人数据
const teamLeaders = ref<Member[]>([])
// 团队协作人数据
const teamCollaborators = ref<Member[]>([])

const initialization = () => {
  if (!props.currentRow) return

  if (props.currentRow.owner) {
    teamLeaders.value = [
      {
        name: useEnumeratePicker(props.operatorOptions.operator, props.currentRow.owner),
        avatar: '',
        color: getRandomColor()
      }
    ]
  }

  if (props.currentRow.partner) {
    // 如果本身是数组
    const newCollaborators = props.currentRow.partner.split(',').map((item) => ({
      name: useEnumeratePicker(props.operatorOptions.operator, Number(item)),
      avatar: '',
      color: getRandomColor()
    }))

    // 使用 nextTick 确保 DOM 更新后再进行操作
    nextTick(() => {
      teamCollaborators.value = newCollaborators
    })
  }
}

// 控制团队负责人和协作人的展开/收起
const activeTeamSections = ref<string[]>(['team-leader', 'team-collaborators'])

// 添加负责人
const addLeader = () => {
  // const { allSchemas } = useCrudSchemas(tableDialogCurdSchema)
  // tableDialogStore.openDialog()
  // tableDialogStore.setSchema(allSchemas)
  teamLeaders.value.push({ name: '新负责人', avatar: '', color: getRandomColor() })
}

// 添加协作人
const addCollaborator = () => {
  teamCollaborators.value.push({ name: '新协作人', avatar: '', color: getRandomColor() })
}

// 删除团队成员
const removeMember = (type: 'leader' | 'collaborator', index: number) => {
  ElMessageBox.confirm(t('common.message.delete'), t('order.tip'), {
    confirmButtonText: t('action.confirm'),
    cancelButtonText: t('action.cancel'),
    type: 'warning'
  })
    .then(() => {
      if (type === 'leader') {
        teamLeaders.value.splice(index, 1)
      } else {
        teamCollaborators.value.splice(index, 1)
      }
    })
    .catch(() => {
      console.log('取消删除')
    })
}

// 修改团队成员（示例功能）
const editMember = (type: 'leader' | 'collaborator', index: number) => {
  ElMessageBox.prompt('请输入新的姓名', '编辑成员', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue:
      type === 'leader' ? teamLeaders.value[index].name : teamCollaborators.value[index].name
  })
    .then(({ value }) => {
      if (type === 'leader') {
        teamLeaders.value[index].name = value
      } else {
        teamCollaborators.value[index].name = value
      }
    })
    .catch(() => {
      console.log('取消修改')
    })
}
// 生成随机颜色
function getRandomColor() {
  const colors = [
    '#f56c6c',
    '#409eff',
    '#67c23a',
    '#e6a23c',
    '#f39c12',
    '#8e44ad',
    '#9b59b6',
    '#3498db',
    '#2ecc71',
    '#f1c40f',
    '#e74c3c',
    '#34495e'
  ]
  return colors[Math.floor(Math.random() * colors.length)]
}

initialization()
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>{{ t('order.team') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-collapse v-model="activeTeamSections">
          <!-- 团队负责人 -->
          <el-collapse-item :title="t('order.owner')" name="team-leader">
            <el-divider />
            <div class="flex items-center">
              <div class="team-card" v-for="(leader, index) in teamLeaders" :key="index">
                <el-avatar
                  :src="leader.avatar"
                  :style="{ backgroundColor: leader.color }"
                  size="large"
                >
                  {{ leader.name.charAt(0).toUpperCase() }}
                </el-avatar>

                <span>{{ leader.name }}</span>
                <!-- <el-dropdown class="edit-icon">
                  <el-icon class="el-icon-more" style="color: black">...</el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="editMember('leader', index)"
                        >修改</el-dropdown-item
                      >
                      <el-dropdown-item @click="removeMember('leader', index)"
                        >删除</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown> -->
              </div>
              <!-- <el-button
                class="action-button"
                type="primary"
                icon="el-icon-plus"
                plain
                @click="addLeader"
                >+ 负责人</el-button
              > -->
            </div>
          </el-collapse-item>

          <!-- 团队协作人 -->
          <el-collapse-item :title="t('order.partner')" name="team-collaborators">
            <el-divider />
            <div class="flex items-center">
              <div
                class="team-card"
                v-for="(collaborator, index) in teamCollaborators"
                :key="index"
              >
                <el-avatar
                  :src="collaborator.avatar"
                  :style="{ backgroundColor: collaborator.color }"
                  size="large"
                >
                  {{ collaborator.name.charAt(0).toUpperCase() }}
                </el-avatar>

                <span>{{ collaborator.name }}</span>
                <!-- <el-dropdown class="edit-icon">
                  <el-icon class="el-icon-more" style="color: black">...</el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="editMember('collaborator', index)"
                        >修改</el-dropdown-item
                      >
                      <el-dropdown-item @click="removeMember('collaborator', index)"
                        >删除</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown> -->
              </div>
              <!-- <el-button
                class="action-button"
                type="primary"
                icon="el-icon-plus"
                plain
                @click="addCollaborator"
                >+ 协作人</el-button
              > -->
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-collapse-transition>
  </el-card>
  <!-- <TableDialog
    :getListApi="getCustomerListApi"
    :limit="tableDialogStore.limit"
    :tableDialogStoreID="tableDialogStoreID"
    :itemTitleName="itemTitleName"
  /> -->
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}

.team-management {
  padding: 20px;
}

.team-card {
  position: relative;
  display: flex;
  width: 200px;
  padding: 10px;
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  align-items: center;
  gap: 10px;
}

.edit-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* 移除 hover 效果的边框和阴影 */
.edit-icon .el-icon {
  outline: none; /* 移除焦点边框 */
  box-shadow: none; /* 移除默认阴影 */
}

.edit-icon .el-icon:hover {
  background-color: transparent; /* 确保 hover 没有背景变化 */
  outline: none;
  box-shadow: none;
}

.action-button {
  /* margin-left: 20px; */
}
</style>
